( 先說，因為真的不知道第一篇寫些什麼好，所以第一篇真的很廢，請別第一天就棄坑了呀哈哈 XD )

我對個不知從哪聽來的人的分級理論印象很深，由高到低分別為 :

• 知道該做什麼，並且去做。
• 不知道該做什麼，但仍然去做。
• 知道該做什麼，卻沒去做。
• 不知道該做什麼，也什麼都不做。

應該是這樣的順序吧 ? 不過不是說印象很深嗎 ? XD。對於這次的30天比賽，其實就有點第二種人的感覺，不知道進度該怎麼安排，覺得會不會到時候寫出不明所以的內容 ? 不過抱著分享及希望可幫助到一些人的心情，給他寫下去就對啦，人往往是靠著一顆赤子之心，再加上突如其來的衝勁，才能突破困境達到目標的啊！要成為第一種人太難了，但是第二種人勉強還達的到啦，一起努力成為至少第二種人吧 XD，想到什麼就寫什麼，反正有30天啦 XD。

本挑戰目標 :

事實上後，Vue 官網說明書滿完善的，但是有些例子可能礙於翻譯或者兩岸語意上有些微妙差異的原因，在讀官網文字的時候，總覺得不是那麼簡單明瞭。之後在實作一些例子或功能的時候，會把官網參考到的概念以及自己的想法盡量以簡單的方式述說，本文將會把目標定位在對 Vue 有基本認識或至少有模糊概念的對象，希望能使閱讀者成為中級 Vuer。

本挑戰出招表:

所謂無招勝有招，因此本挑戰並沒有一定的出招表，俠之大者，兩肋插刀赴長沙，無猶也。三心二意非老夫行事風格，虛無飄渺，隨心所欲實乃一塊塊綠豆糕精神，倘若無法接受一塊塊綠豆糕精神，那你就請你自己上來寫一篇教學好了啦。

開玩笑的ㄏㄏ，雖然文章沒有一定的教學方式或順序，但一定是老夫竭盡全力的內容啊 ! 希望能讓閱讀者對 Vue 的應用有所認識和增長，並且利用學到的內容構建起咱們 Vue CLI + Firebase 的目標。本30天挑戰將會使用 CLI 建立專案目錄，但我們會有一些入門的部分，這部分先不這麼做。使用 CLI ，組件的觀念非常吃重，所以開始講組件時希望大家一定要實際下去寫 code。

架構

Vue CLI

依照需求負責建立專案資料夾，沒什麼好說的。

Firebase

Firebase 是 Google 推出的一系列雲端服務，針對此次專案，將會使用其中的 Cloud Firestore 資料庫，以及 Authentication 身分驗證。使用這些功能的好處是依靠純前端就可以完成，透過 Firebase 各個不同模塊所提供的 API ，我們可以非常容易的存取這些服務項目。

而我們的部落格，像是文章，來訪人次，會員資料，點讚功能，後台對前台的各種操作，只要是一切需要資料互動及顯示的內容，我們都要依靠 Cloud Firestore 來取得資料並顯示。如果你有串接過後端的 API 來撈取資料，應該不難懂我在說什麼，我們的後端就是變成 Cloud Firestore，並使用他提供的方法來做一系列存取。而 Authentication 主要是作為使用者的登入登出，以及管理用途，相對來說單純些。

BootstrapVue

BootstrapVue 是基於 Bootstrap 打造的框架，將會使用他來做切版，其 Grid System 用法和 Bootstrap 沒什麼不同，想像成我們是用組件的方式使用 Bootstrap 即可。

MVC

事實上我們知道 Vue 參考 MVVM 概念，MVC 支派滿山滿谷，那我們怎麼把 MVC 裝進來呢 ? 我們將使用以下:

完全照抄維基百科版 :

模型（Model） - 程式設計師編寫程式應有的功能（實現演算法等等）、資料庫專家進行資料管理和資料庫設計(可以實現具體的功能)。

視圖（View） - 介面設計人員進行圖形介面設計。

控制器（Controller）- 負責轉發請求，對請求進行處理。

接下來是我們的用法:

• Model 的部分，我們會設計一個 Class 負責跟 Firebase 進行數據交互來模擬 Model，接收的數據傳給 Controller。

• Controller 就比較單純，負責接收使用者的動作並處理程式流程，值返回 View。

• View 的部分就負責接收 Controller 送回來的資料，並決定最終要顯示的值，然後更新我們的 data。

透過以上敘述，應該可以發現因為我們用的是 Vue，像 Controller 其實就很像 methods 裡的一道道 function，而View 層的界定其實比較模糊，因為 Vue 也幫我們處理好了，我們只要注意與視圖畫面相關的 data 即可，所以所謂的 MVC ，其實在 Vue 中已經有 87% 像了啦，根本也不用硬塞什麼的。

有點廢的入門 — 我每天都在爆廢公社

• 接下來只是練習，開啟我們的 VS Code ( 咦 ? ) 來自行備妥一份基本的 HTML 文件並用自己歡喜的方式引入 Vue，像我很懶所以都去複製 CDN or CodePen 直接用啦。
• 做一個 Vue 實例 ( 中文的地方不要真的寫中文餒我的好朋友 )。

new Vue({
	el: '#app',
	data: {
		name: 'aka allen',
		nameFilter: ['a', 'k', 'a', ' ', 'a', 'l', 'l', 'e', 'n'],
		whoIsThat: 'Elvis',
		show: true
	},

	methods: {
		methods中的方法名稱1 () {
			玩坦克世界
		},

        methods中的方法名稱2 () {
			這是一款戰爭遊戲，不是賽車遊戲
		}
	}
});

• 有了 Vue 實例 ，可以做些非常普通的事情，像是 ( 這邊為撰文方便，要運行程式碼，請自行刪除中文字的部分或註解 ):

1. 雙括括插值 ( 模板語法 Mustache，支持簡單JS表達式 )
<span> {{ name }} </span> 

2. 綁定資料 ( v-bind:可只留 "冒號" )
<input v-bind:value="name"></input> 

3. 雙向綁定資料 ( 通常用於 <input> <select> )
<input v-model="name"></input>  

4. 迴圈渲染陣列元素
<span v-for="text in nameFilter">{{ text }}</span> 

5. 註冊各種事件並執行方法 ( v-on: 可所寫成 @ )
<div v-on:click="methods中的方法名稱1">方法一</div>
方法二<input v-on:input="methods中的方法名稱2"></input>

6. 依條件是否渲染 (v-show 與 v-if 的差距在於 v-show 是僅僅切換 CSS，而 v-if 在底層有其他處理)
<div v-if="whoIsThat === 'Allen'">Allen</div>
<div v-else-if="whoIsThat === 'Elvis'">Elvis</div>
<div v-else>no</div>

<div v-show="show">hehe</div>

https://codepen.io/fiftybillionHuang/pen/KKzXXrY

對於已有基礎的讀者，透過以上幾種超廢的用法， 稍微練練感覺罷了，我也說不上啥，明天介紹對於還沒踏入組件化開發的人，可能是比較少用的生命週期部分。

沒事也可以逛逛我們其他團隊成員的文章啦 ~~

eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列

PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列

阿電: 忍住不打牌位，只要30天VueJS帶你上A牌 系列

喬依司: 實作經典 JavaScript 30 系列